<template>
   <el-card>
       <el-row shadow="hover" v-show="showSearch" class="ml10">
            <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
                <el-form-item :label="t('aigcDoc.id')" prop="docId">
                    <el-select v-model="state.queryForm.docId" :placeholder="t('aigcDocSlice.inputDocIdTip')">
                        <el-option v-for="item in docList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                     </el-select>
                </el-form-item>
                <el-form-item>
                   <el-button icon="search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
                   <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
                </el-form-item>
            </el-form>
       </el-row>
        <el-row>
             <div class="mb8" style="width:100%">
                <el-button plain :disabled="multiple" icon="Delete" type="primary" class="ml10" v-auth="'aigc_doc_delete'" @click="handleDelete(selectObjs)">
                    {{ $t('common.delBtn') }}
                </el-button>
                <right-toolbar
                    v-model:showSearch="showSearch"
                    class="ml10"
                    style="float: right; margin-right: 20px"
                    @queryTable="getDataList"/>
            </div>
        </el-row>
        <el-table :data="state.dataList" v-loading="state.loading" style="w-full"
            border @selection-change="handleSelectionChange"
            :cell-style="tableStyle.cellStyle"
            :header-cell-style="tableStyle.headerCellStyle"
            >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column :label="t('aigcDocSlice.wordNum')" prop="wordNum" align="center"></el-table-column>
            <el-table-column :label="t('aigcDocSlice.status')" prop="status" align="center"></el-table-column>
            <el-table-column :label="t('aigcDocSlice.content')" prop="content" align="center"></el-table-column>
            <el-table-column :label="t('aigcDocSlice.createTime')" prop="createTime" align="center"></el-table-column>
            <el-table-column :label="$t('common.action')" align="center" width="100">
                    <template #default="scope">
                        <el-button text icon="delete" v-auth="'aigc_doc_slice_delete'" @click="handleDelete([scope.row.id])">{{ $t('common.delBtn') }}</el-button>
                    </template>
            </el-table-column>
        </el-table>
        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
   </el-card>
</template>

<script lang="ts" setup>
   import {useI18n} from "vue-i18n";
   import {pageList} from "/@/api/aigc/doc";
   import {delObj} from "/@/api/aigc/docSlice";
   import {useMessage,useMessageBox} from "/@/hooks/message";
   import {BasicTableProps,useTable} from "/@/hooks/table";
   import {useDict} from '/@/hooks/dict';

   const {t} = useI18n();
    //知识库信息
   const props=defineProps({
       data:Object as PropType<any>,
   });
   // 表格数据和分页参数
   const state: BasicTableProps = reactive<BasicTableProps>({
        queryForm: {
            docId:'',
            name:'',
            type:'',
            content:'',
            knowledgeId:props.data?.id||'',
        },
        pageList: pageList,
        descs: ['create_time'],
    })
    const {aigc_doc_type}= useDict('aigc_doc_type');
     const queryRef = ref();
     const showSearch = ref(true);
     // 多选rows
     const selectObjs = ref([]) as any;
     // 是否可以多选
     const multiple = ref(true);
    //  table hook
    const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
    //文档列表
    const docList=ref([]);
    onMounted(async ()=>{
       docList.value=await getDataList();
    });
    // 清空搜索条件
    const resetQuery = () => {
    	queryRef.value.resetFields();
    	getDataList();
    };
    //多选事件
    const handleSelectionChange=(objs:{id:string}[])=>{
        selectObjs.value = objs.map(({ id }) => id);
        multiple.value = !objs.length;
    };

    // 删除操作
    const handleDelete = async (ids: string[]) => {
    	try {
    		await useMessageBox().confirm(t('common.delConfirmText'));
    	} catch {
    		return;
    	}

    	try {
    		await delObj(ids);
    		getDataList();
    		useMessage().success(t('common.delSuccessText'));
    	} catch (err: any) {
    		useMessage().error(err.msg);
    	}
    };
</script>
